<template>
    <div>
        <header>
            <a class="headerback" @click="go()"><img src="/img/back.png"/></a>
            <div class="indexsearch">
                确认订单
            </div>
        </header>
        <div class="site">
            <div class="choose" @click="jump()">
                <div class="ture">请 选 择：</div>
                <div class="userif">{{ username }}<br />{{ address }}</div>
            </div>
        </div>
        <div class="list">
            <p class="qingdan">商品清单</p>
            <ul>
                <li v-for="(item, index) in list" :key="index">
                    <img :src="item.src" />
                    <div class="qingdanxinxi">
                        <p>{{ item.title }}</p>
                        <span
                            ><p>尺码:{{ item.size }}</p>
                            <p>数量X{{ item.num }}</p></span
                        >
                    </div>
                    <span class="num">￥{{ item.price }}</span>
                </li>
            </ul>
            <div class="peisong">
                <p>配送方式：</p>
                <p>普通快递</p>
            </div>
            <div class="jiesuan">
                <p>订单结算：</p>
            </div>
            <div class="qian">
                <p>商品总价</p>
                <p>￥{{ price }}</p>
            </div>
            <div class="kong"></div>
            <footer>
                <div class="jin">
                    <p>
                        应付款金额：<b>￥{{ price }}</b>
                    </p>
                </div>
                <van-button
                    type="danger"
                    color="linear-gradient(to right, #ff6034, #ee0a24)"
                    size="large"
                    @click="submit"
                    >提交订单</van-button
                >
            </footer>
        </div>
    </div>
</template>

<script>
import { Toast } from "vant";
import getuser from "../api/userApi";
import { getUser } from "../utils/auth";

export default {
    data() {
        return {
            address: "",
            username: "",
            price: "",
            list: []
        };
    },

    components: {},

    methods: {
        go() {
            //返回上级
            this.$router.go(-1);
        },
        jump() {
            //点击请选择跳转到地址添加
            this.$router.push("/address");
        },
        submit() {
            //提交成功提示
            if (this.address) {
                Toast("下单成功(^_^)");
            } else {
                Toast("地址为空(っ °Д °;)っ");
            }
        }
    },
    created() {
        //钩子添加商品获取信息，渲染ul>li

        this.list = JSON.parse(localStorage.getItem("order"));
        //console.log(this.list)
        this.price = JSON.parse(localStorage.getItem("price"));
        //console.log(this.price)

        getuser
            .getuser({ username: getUser() })
            .then(res => {
                //console.log({ usename: getUser() })
                // let name = `${res.data.data[0].addList[0].name}:`;
                // let add = `${res.data.data[0].addList[0].address}`;
                // let tel = res.data.data[0].addList[0].tel;
                // this.address = add;
                // this.username = name + tel;
                let i = res.data.data[0].addList;
                let b = i.filter(function(item) {
                    if (item.isDefault == true) {
                        return item;
                    }
                });
                if (b.length) {
                    if (b[0].isDefault) {
                        let name = `${b[0].name}:`;
                        let add = b[0].address;
                        let tel = b[0].tel;
                        this.address = add;
                        this.username = name + tel;
                    }
                }
            })
            .catch(err => {
                console.log(err);
            });
    }
};
</script>

<style scoped lang="scss">
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";
header {
    display: flex;
    justify-content: space-between;
    background-color: #f5f5f5;

    .headerback img {
        width: v(40);
        height: v(50);
    }

    .indexsearch {
        width: v(286);
        height: v(50);
        padding-left: vw(235);
        line-height: v(50);
    }
    .index img {
        width: v(46);
        height: v(50);
    }
}
.site {
    background: url("/img/orderaddressbg.jpg") no-repeat;
    height: vw(200);
    width: vw(750);
    display: flex;
    background-size: 100% 4.9rem;
    .choose {
        display: flex;
        .ture {
            font-size: vw(24);
            height: vw(100);
            padding-top: vw(20);
            padding-left: vw(40);
            color: #444444;
        }
        .userif {
            font-size: vw(34);
            height: vw(156);
            line-height: vw(50);
            padding-left: vw(40);
            padding-top: vw(20);
            color: #444444;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }
}
.list {
    padding-top: vw(10);
    margin-left: vw(25);

    .qingdan {
        line-height: vw(80);
        font-size: vw(28);
        border-bottom: vw(1) solid #d7d7d7;
        color: #5f5f5f;
    }
    li {
        width: 100%;
        height: vw(180);
    }
}
.peisong {
    display: flex;
    justify-content: space-between;
    border-bottom: vw(1) solid #d7d7d7;
    line-height: vw(80);
    font-size: vw(28);
    color: #5f5f5f;
}
.jiesuan {
    display: flex;
    justify-content: space-between;
    border-bottom: vw(1) solid #d7d7d7;
    line-height: vw(80);
    font-size: vw(28);
    color: #5f5f5f;
}
.qian {
    display: flex;
    justify-content: space-between;
    color: #5f5f5f;
    font-size: vw(26);
}
ul {
    li {
        display: flex;
        font-size: vw(26);
        border-bottom: vw(1) solid #d7d7d7;
        img {
            margin-top: vw(20);
            height: vw(112);
            width: vw(112);
        }
        .qingdanxinxi {
            padding: vw(0) vw(15);
            line-height: vw(56);
            span {
                display: flex;
                justify-content: space-between;
            }
        }
        .num {
            margin-top: vw(50);
        }
    }
}
.kong {
    height: vw(300);
    //background: pink;
}
footer {
    width: vw(750);
    height: vw(100);
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    background: white;
    justify-content: space-between;
    border-top: vw(1) solid #d7d7d7;
    button {
        width: vw(230);
    }
    .jin {
        line-height: vw(100);
        padding-left: vw(20);
        font-size: vw(38);
        b {
            font-size: vw(48);
            color: #de2b73;
        }
    }
}
</style>
